<template>
	<div>
		<!-- 表格中数据 -->
		<div>
			<el-table
				ref="multipleTable"
				:data="tableData"
				tooltip-effect="dark"
				style="width: 100%"
				@selection-change="handleSelectionChange">
				<el-table-column
					type="selection"
					width="55">
				</el-table-column>
				
				<el-table-column
					prop="id"
					label="ID"
					width="80">
				</el-table-column>
				<el-table-column
					prop="saleNumber"
					label="单据编号"
					width="160">
				</el-table-column>
				<el-table-column
					label="应付金额"
					width="120">
					<template slot-scope="scope">
						{{scope.row.amountPayable}}.00 ￥
					</template>
				</el-table-column>
				<el-table-column
					label="实付金额"
					width="120">
					<template slot-scope="scope">
						{{scope.row.amountPaid}}.00 ￥
					</template>
				</el-table-column>
				<el-table-column
					prop="saleDate"
					label="入库日期"
					width="180">
				</el-table-column>
				<el-table-column
					prop="customer.name"
					label="客户"
					width="180">
				</el-table-column>
				<el-table-column
					prop="state"
					label="状态"
					width="120">
					<template slot-scope="scope">
						<span v-show="scope.row.state===1" style="color: #13CE66;">已付款</span>
						<span v-show="scope.row.state===2" style="color: crimson;">未付款</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="remarks"
					label="备注"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column
					label="入库单据详情">
					<template slot-scope="scope">
						<el-link type="primary" @click="optionDialog(scope.row)">点击查看单据详情</el-link>
					</template>
				</el-table-column>
				<el-table-column
					prop="admin.name"
					label="操作人员"
					width="120">
				</el-table-column>
			</el-table>
		</div>
		
		<!-- 单据详情弹框 -->
		<div>
			<el-dialog title="单据详情" :visible.sync="dialogSync" width="80%" >
				<strong >单据编号:</strong>{{purchaseDialog.saleNumber}}
				<strong style="margin-left: 16px;">应付金额:</strong>{{purchaseDialog.amountPayable}}.00￥
				<strong style="margin-left: 16px;">实付金额:</strong>{{purchaseDialog.amountPaid}}.00￥
				<strong style="margin-left: 16px;">入库日期:</strong>{{purchaseDialog.saleDate}}
				<strong style="margin-left: 16px;">客户:</strong><span v-if="purchaseDialog.customer!=null">{{purchaseDialog.customer.name}}</span>
				<strong style="margin-left: 16px;">状态:
					<span v-show="purchaseDialog.state===1" style="color: #13CE66;">已付款</span>
					<span v-show="purchaseDialog.state===2" style="color: crimson;">未付款</span>
				</strong>
				<strong style="margin-left: 16px;">备注:</strong>{{purchaseDialog.remarks}}
				<strong style="margin-left: 16px;">操作人员:</strong>{{purchaseDialog.admin.name}}
				<hr />
				<el-table
				      :data="purchaseDialog.saleGoodsLIst"
				      style="width: 100%">
				      <el-table-column
				        prop="code"
				        label="商品编号"
				        >
				      </el-table-column>
				      <el-table-column
				        prop="name"
				        label="商品名称"
				        >
				      </el-table-column>
				      <el-table-column
				        prop="model"
				        label="型号">
				      </el-table-column>
					  <el-table-column
					  	prop="number"
					  	label="数量">
					  </el-table-column>
						<el-table-column
							prop="price"
							label="商品单价">
						</el-table-column>
						<el-table-column
							prop="total"
							label="总金额">
						</el-table-column>
						<el-table-column
							prop="unit"
							label="计量单位">
						</el-table-column>
						<el-table-column
							prop="goodstype.name"
							label="类型">
						</el-table-column>
				    </el-table>
				
			</el-dialog>
		</div>
		
		<!-- 分页查询 -->
		<div class="block">
		    <el-pagination
		            @size-change="handleSizeChange"
		            @current-change="handleCurrentChange"
		            :current-page="purchaseVo.currentPage"
		            :page-sizes="[5, 10, 15, 20]"
		            :page-size="purchaseVo.sizePage"
		            layout="total, sizes, prev, pager, next, jumper"
		            :total="total">
		    </el-pagination>
		</div>
	</div>
</template>

<script>
	export default{
		//数据
		data() {
			return {
				//表格数据
				tableData:[],
				
				//单据详情弹框
				dialogSync: false,
				//弹框中入库单据对象
				purchaseDialog: {},
				
				//复选框ids
				ids: [],
				//模糊分页查询对象
				purchaseVo: {
					currentPage: 1,
					sizePage: 5,
				},
				//分页总记录数
				total: 30,
			};
		},
		//函数
		methods: {
			//打开单据详情复选框
			optionDialog(row) {
				this.dialogSync=true;
				
				this.postRequest("/sale/queryPurById/"+row.id).then(res=> {
					this.purchaseDialog=res.data.purchaseOfId;
					//console.log(this.purchaseDialog);
				})
			},
			
			//关于分页
			handleSizeChange(val) {
			    //console.log(`每页 ${val} 条`);
			    this.purchaseVo.sizePage=val;
			    this.queryTableDate()
			},
			handleCurrentChange(val) {
			    //console.log(`当前页: ${val}`);
			    this.purchaseVo.currentPage=val;
			    this.queryTableDate();
			},
			//复选框获取选中行的值
			handleSelectionChange(val) {
				var idm = [];
				for (let nation of val) {
				    idm.push(nation.id);
				}
				this.ids=idm;
				console.log(this.ids);
			},
			//获取表格中数据
			queryTableDate() {
				this.postRequest("/sale/queryPageLike",this.purchaseVo).then(res=> {
					//console.log(res.data.listPageLike);
					this.tableData=res.data.listPageLike;
					this.total=res.data.total;
				})
			},
		},
		//页面加载完之后执行的方法
		mounted() {
			this.queryTableDate();
			this.postRequest("/sale/queryPurById/7").then(res=> {
				this.purchaseDialog=res.data.purchaseOfId;
			})
		},
	}
</script>

<style>
</style>
